import React, {Component} from 'react'
import {
    Text,
    View,
    StyleSheet,
    Button,
    TextInput,
    Image,
    FlatList,
    ScrollView,
    InteractionManager,
    Animated,
    TouchableOpacity, TouchableHighlight, ViewStyle
} from 'react-native'
import {inject, observer} from "mobx-react";
import {Actions} from "react-native-router-flux";
import {Store} from "../../store";
import {dateFormat, keyExtractor, toFixed} from "../../util";
import LabelWithValue from "../../component/page/mine/income/labelWithValue";
import hairlineWidth = StyleSheet.hairlineWidth;
import {
    SignInInfoAttribute,
    UserOutPointsInterface
} from "../../net/instance/CommenModelInstance";
import CommonFlatList from "../../component/common/CommonFlatList";

interface SignInDetailProps extends Store {
}

interface SignInDetailState {

}

interface DetailCellProps {
    item: SignInInfoAttribute,
    index: number
}


function DetailCell(props: DetailCellProps) {
    const {item, index} = props;
    const marginTop = index === 0 ? null : 7;
    return (<View style={{marginTop, backgroundColor: "#fff"}}>
        <LabelWithValue label={"签到积分"}
                        style={{paddingHorizontal: 11, height: 40, paddingTop: 0}}
                        value={item.outScore}
            valueStyle={{fontSize: 18, color: "#000", fontWeight: "normal"}}
                        labelStyle={{color: "#999"}}/>
        <View style={{borderTopWidth: hairlineWidth, borderTopColor: "#EEEEEE", paddingVertical: 15}}>
            <LabelWithValue label={"积分"}
                            style={{paddingHorizontal: 11}}
                            value={item.outScore}
                            valueStyle={{fontSize: 14, color: "#000", fontWeight: "normal"}}
                            labelStyle={{color: "#999"}}/>
            <LabelWithValue label={"创建时间"}
                            style={{paddingHorizontal: 11}}
                            value={dateFormat(item.signInDate)}
                            valueStyle={{fontSize: 14, color: "#000", fontWeight: "normal"}}
                            labelStyle={{color: "#999"}}/>
        </View>
    </View>)
}

@inject("sign")
@observer
export default class SignInDetail extends Component<SignInDetailProps, SignInDetailState> {
    async componentDidMount() {
        global.showLoading();
        await this.props.sign.getSignInDetails();
        global.hideLoading();
    }

    commonList: CommonFlatList;
    refresh = () => {
        setTimeout(() => {
            this.commonList.refreshComplete(false);
        }, 1000);
    };
    loadMore = () => {

    };
    renderItem = (props) => {
        return <DetailCell {...props}/>
    };
    renderFooter = () => {
        const {signOutPointDetails} = this.props.sign;
        const totalOutPoints = signOutPointDetails.reduce((initVal, cur) => {
            return initVal + cur.outScore;
        }, 0);
        return (
            <View style={{marginTop: 7, backgroundColor: "#fff"}}>
                <LabelWithValue label={"签到获得总积分"}
                                style={{paddingHorizontal: 11, height: 40, paddingTop: 0}}
                                value={totalOutPoints}
                                valueStyle={{fontSize: 18, color: "#ff6337", fontWeight: "normal"}}
                                labelStyle={{color: "#999"}}/>
            </View>
        )
    };


    render() {
        const {signOutPointDetails} = this.props.sign;

        return (<CommonFlatList ref={comp => this.commonList = comp} keyExtractor={keyExtractor}
                                renderItem={this.renderItem} loadMore={this.loadMore} data={signOutPointDetails}
                                ListFooterComponent={this.renderFooter}
                                refresh={this.refresh}/>)
    }
}


const SignInDetailStyles = StyleSheet.create({
    container: {}
});
